<template>
  <div>
    <!-- 定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>账单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 定义卡片 -->
    <el-card class="box-card">

      <!-- 获取商品列表数据 -->
      <el-table :data="billList" style="width: 100%" stripe border>
        <el-table-column prop="itemNum" label="商品号" width="120px">
        </el-table-column>
        <el-table-column prop="itemType" label="商品类型" width="120px">
        </el-table-column>
        <el-table-column prop="userRealname" label="姓名" width="120px">
        </el-table-column>
        <el-table-column prop="userPhone" label="电话" width="170px">
        </el-table-column>

        <!-- 使用过滤器修改时间 在main.js中定义过滤器 -->
        <el-table-column prop="money" label="价格(元)" width="120px">
          <template slot-scope="scope">
            {{scope.row.money | priceFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="msg" label="备注信息" width="305px">
        </el-table-column>
        <el-table-column prop="created" label="点餐时间" width="200px" :formatter="formatDate">
        </el-table-column>
        <el-table-column prop="updated" label="结账时间" width="200px" :formatter="formatDate">
        </el-table-column>


      </el-table>

      <!-- 定义分页插件-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryBillInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryBillInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //1.定义账单列表信息
        billList: [],
        //2.定义分页对象
        queryBillInfo: {
          id:'',
          query: '', //定义查询参数
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
        user: {
          id:'',
          userid:'',
          itemid:'',
          usernum:'',
          money:'',
          itemtype:'',
          created:'',
          updated:'',
          msg:''
        },
      }
    },
    created() {
		this.queryBillInfo.id = window.sessionStorage.getItem('id');
      //1.获取账单列表数据
      this.getuserlist()
    },
    methods: {
      //实现账单信息分页查询
      async getuserlist() {

        const {data: result} =
        await this.$http.get("/bill/getuserbill",{params: this.queryBillInfo})
        if (result.status !== 200) return this.$message.error("账单列表查询失败")
        this.billList = result.data.rows
        console.log(this.billList)
        this.total = result.data.total
        this.msg=result.data.rows.msg
        console.log(this.msg)
      },
      //通过JS格式化时间
      formatDate(row, column, cellValue, index) {
        let date = new Date(cellValue)
        let year = date.getFullYear()
        let month = (date.getMonth() + 1 + '').padStart(2, '0')
        let day = (date.getDate() + '').padStart(2, '0')
        let HH = (date.getHours() + '').padStart(2, '0')
        let MM = (date.getMinutes() + '').padStart(2, '0')
        let SS = (date.getSeconds() + '').padStart(2, '0')
        if(year===1970) return
        return year + '-' + month + '-' + day + ' ' + HH + ":" + MM + ":" + SS
      },
      //条数变化时 调用
      handleSizeChange(size) {
        this.queryBillInfo.pageSize = size
        this.getuserlist()
      },
      //页码值变化时 调用
      handleCurrentChange(current) {
        this.queryBillInfo.pageNum = current
        this.getuserlist()
      },
    }
  }
</script>
<!-- 防止组件样式冲突 -->
<style lang="less" scoped>


</style>
